<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<title></title>
	<script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script>
	<script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
	<style type="text/css">
	#qrcode{display: none;}
	img{display: block;margin: 0.4rem auto;}
	body{width: 100%;}
	#qrcode_temp{background-color: #eee;display: none;}
	</style>
</head>
<body>
	<div id="qrcode"></div>
	<canvas id="qrcode_temp"></canvas>
	<img src="" id="qrcodeIMG">
	<script type="text/javascript">
	var QR_CODE_SIZE = 256;
	var AVATAR_SIZE = 60;
	var AVATAR_BIG_SIZE = 100;
	var QR_CODE_SIZE_2 = QR_CODE_SIZE/2;
	var AVATAR_SIZE_2 = AVATAR_SIZE/2;

	var uid = getUrlParam('anchorUID');
	var nickName = decodeURIComponent(getUrlParam('nickName'));
	var signature = decodeURIComponent(getUrlParam('signature'));
	var avatar = getUrlParam('avatar').replace(/http\:\/\/cdn.91ns.com\//, '/img?path=/');
	console.log(uid, nickName, signature, avatar);
	var $qrcode = jQuery('#qrcode');
	var tempCanvas = document.getElementById('qrcode_temp');
	$qrcode.qrcode({width:QR_CODE_SIZE, height:QR_CODE_SIZE, text:"http://www.91ns.com/"+uid, foreground:'#f09', background:'#fff'});
	var canvas = $qrcode.children('canvas')[0];
	document.title = '【'+nickName+'】推广二维码';
	var img = new Image();
	//img.crossOrigin = "Anonymous";
	img.onload = function(){
		tempCanvas.width = QR_CODE_SIZE;
		tempCanvas.height = QR_CODE_SIZE + 250;
		var ctxTemp = tempCanvas.getContext('2d');
		var ctx = canvas.getContext('2d');
		ctx.save();
		ctx.beginPath();
		ctx.lineWidth = 5;
		ctx.strokeStyle = '#fff';
		ctx.shadowBlur = 30;
		ctx.shadowColor = '#fff';
		ctx.arc(QR_CODE_SIZE_2, QR_CODE_SIZE_2, AVATAR_SIZE_2, 0, Math.PI*2, true);
		ctx.clip();
		ctx.drawImage(img, 0, 0, img.width, img.width, QR_CODE_SIZE_2 - AVATAR_SIZE_2, QR_CODE_SIZE_2 - AVATAR_SIZE_2, AVATAR_SIZE, AVATAR_SIZE);
		ctx.stroke();
        ctx.restore();
        //canvas.width = QR_CODE_SIZE + 400;
        //canvas.height = QR_CODE_SIZE + 400;
		ctxTemp.drawImage(canvas, 0, AVATAR_BIG_SIZE*2.1);
		ctxTemp.font = "2rem sans-serif";
		var text = ctxTemp.measureText(nickName);
		ctxTemp.strokeText(nickName, QR_CODE_SIZE_2 - text.width/2, AVATAR_BIG_SIZE + 50);
		text = ctxTemp.measureText(signature);
		ctxTemp.fillText(signature, QR_CODE_SIZE_2 - text.width/2, AVATAR_BIG_SIZE + 90);
		ctxTemp.save();
		ctxTemp.beginPath();
		ctxTemp.lineWidth = 5;
		ctxTemp.strokeStyle = '#fff';
		ctxTemp.shadowBlur = 30;
		ctxTemp.shadowColor = '#fff';
		ctxTemp.arc(QR_CODE_SIZE_2, AVATAR_BIG_SIZE/2 + 10, AVATAR_SIZE, 0, Math.PI*2, true);
		ctxTemp.clip();
		ctxTemp.drawImage(img, 0, 0, img.width, img.width, QR_CODE_SIZE_2 - AVATAR_BIG_SIZE/2, 10, AVATAR_BIG_SIZE, AVATAR_BIG_SIZE);
		ctxTemp.stroke();
        ctxTemp.restore();
		var image = tempCanvas.toDataURL('image/png');
		$('#qrcodeIMG')[0].src = image;
	};
	img.src = avatar;
	function getUrlParam(name){
	    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
	    var r = window.location.search.substr(1).match(reg);  //匹配目标参数
	    if (r!=null) return unescape(r[2]); return null; //返回参数值
	}
	function toUtf8(str) {
	    var out, i, len, c;
	    out = "";
	    len = str.length;
	    for(i = 0; i < len; i++) {
	        c = str.charCodeAt(i);
	        if ((c >= 0x0001) && (c <= 0x007F)) {
	            out += str.charAt(i);
	        } else if (c > 0x07FF) {
	            out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
	            out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));
	            out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
	        } else {
	            out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));
	            out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
	        }
	    }
	    return out;
	}
</script>
</body>
</html>